<template>
	<view class='back-page'>
        <view class='back-span' :class="show_num=='GO'?'back-span-small':''" :animation="animation">{{show_num}}</view>
  </view>
</template>

<script>
	export default {
		data() {
			return {
				animation: "",
				show_num: '',
				sportType: -1,
				audio: null
			}
		},
		onLoad(event) {
			var that = this;
			that.sportType = event.type;
			
			that.audio = uni.getBackgroundAudioManager();
			
			this.show(2);
			setTimeout(function(){
				that.show(1);
			},1200)
			setTimeout(function () {
				that.show(0);
			}, 2400)
			setTimeout(function () {
				that.show('GO');
			}, 3600)
			setTimeout(function () {
				if(that.sportType == 1){
					uni.redirectTo({
						url: '/pages/sport/running'
					});
				}else if(that.sportType == 2){
					uni.redirectTo({
						url: '/pages/sport/riding'
					});
				}
			}, 4800)
		},
		methods: {
			show:function(num){
				var that = this;
				
				var animation = uni.createAnimation({
					  duration: 600,
					  transformOrigin: "50% 50%",
					  timingFunction:'ease'
				})
				this.animation = animation
				animation.scale(0.01,0.01).step()
				this.animation = animation.export();
				setTimeout(function () {
					animation.scale(1, 1).step();
					if(num != "GO"){
						that.show_num = num+1;
					}else{
						that.show_num = num;
					}
					
					that.audio.title = '倒计时';
					that.audio.singer = '暂无';
					that.audio.coverImgUrl = 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/audio/music.jpg';
					if(that.show_num == 3){
						that.audio.src = "http://zhhq.lzfsd.com/images/zhty/music/3.mp3";
					}else if(that.show_num == 2){
						that.audio.src = "http://zhhq.lzfsd.com/images/zhty/music/2.mp3";
					}else if(that.show_num == 1){
						that.audio.src = "http://zhhq.lzfsd.com/images/zhty/music/1.mp3";
					}else if(that.show_num == 'GO'){
						that.audio.src = "http://zhhq.lzfsd.com/images/zhty/music/go.mp3";
					}
					that.audio.play();
					console.log(that.show_num);
					that.animation = animation.export();
				}, 600)
			}
		}
	}
</script>

<style>
	.run-page{
  width:100%;
  height:100%;
  background: #4b4256;
  text-align: center;
  color: #fff;
}
.run-top{
  text-align: center;
  font-size: 36rpx;
  line-height:80rpx;
}
.run-num{
  font-size: 150rpx;
  text-align: center;
  display: inline-block;
  margin: 0 auto;
  position: relative;
  line-height: 160rpx;
  margin-bottom:20rpx;
}
.run-km{
  font-size: 28rpx;
  color: #7f7588;
  position: absolute;
  right:-60rpx;
  bottom:-40rpx;
}
.run-status{
  width:100%;
  display: flex;
}
.run-status view{
  flex: 1;
}
.run-minute{
   margin: 40rpx 0;
  font-size: 70rpx;
}
.run-span{
  color: #7f7588;
  font-size: 28rpx;
}
.run-bottom{
 text-align: center;
}
.run-btn{
  height:150rpx;
width:150rpx;
border:3rpx solid #51485b;
border-radius:50%;
color:#51485b;
line-height:150rpx;
display:inline-block;
margin:40rpx 8rpx;
background:#fff;

}
.continue{
background:#24c789;
color: #fff;
}
.over{
background:#f35252;
color: #fff;
}
.back-page{
  width:100%;
background:#24c789;
color:#fff;
vertical-align:middle;
text-align:center;
height:100%;
position:absolute;
z-index:10;
display: table;
}
.back-span{
  color: #fff;
  display: table-cell;
  vertical-align: middle;
  font-size: 800rpx;
  margin: 0 auto;
}

.back-span-small{
  font-size: 400rpx;
}
</style>
